/*注册界面的js*/

/*name界面*/
var namewarn = false;
var nameEle = document.getElementById("name");
var nameWarnEle = document.getElementById("namewarn");
namepattern = /^[\u4E00-\u9FA5]{2,4}$/; /*name的正则模板*/
nameEle.onfocus = function (ev) {
  /*获取焦点*/
  if (nameEle.value == "请输入你的姓名") {
    this.value = "";
  }
};
nameEle.onblur = function (ev) {
  /*失去焦点*/
  if (nameEle.value == "") {
    this.value = "请输入你的姓名";
  }
  if (!namepattern.test(nameEle.value)) {
    nameWarnEle.innerHTML = "名字输入错误";
  } /*失去焦点进行内容判断*/
  if (namepattern.test(nameEle.value)) {
    nameWarnEle.innerHTML = "";
    namewarn = true;
  }
};

/*性别界面*/
var genderwarn = false;
var femaleEle = document.getElementById("female");
var maleEle = document.getElementById("male");
var genderWarnEle = document.getElementById("genderwarn");
femaleEle.onchange = function (ev) {
  genderwarn = true;
};
maleEle.onchange = function (ev) {
  genderwarn = true;
};

/*邮箱界面*/
var emailwarn = false;
var emailEle = document.getElementById("email");
var emailWarnEle = document.getElementById("emailwarn");
emailpattern =
  /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; /*email的正则模板*/
emailEle.onfocus = function (ev) {
  /*获取焦点*/
  if (emailEle.value == "请输入你的邮箱") {
    this.value = "";
  }
};
emailEle.onblur = function (ev) {
  /*失去焦点*/
  if (emailEle.value == "") {
    this.value = "请输入你的邮箱";
  }
  if (!emailpattern.test(emailEle.value)) {
    emailWarnEle.innerHTML = "邮箱格式错误";
  } /*失去焦点进行内容判断*/
  if (emailpattern.test(emailEle.value)) {
    emailWarnEle.innerHTML = "";
    emailwarn = true;
  }
};

/*手机号界面*/
var phonewarn = false;
var phoneEle = document.getElementById("phone");
var phoneWarnEle = document.getElementById("phonewarn");
phonepattern = /^1[3589]\d{9}$/; /*phone的正则模板*/
phoneEle.onfocus = function (ev) {
  /*获取焦点*/
  if (phoneEle.value == "请输入你的手机号") {
    this.value = "";
  }
};
phoneEle.onblur = function (ev) {
  /*失去焦点*/
  if (phoneEle.value == "") {
    this.value = "请输入你的手机号";
  }
  if (!phonepattern.test(phoneEle.value)) {
    phoneWarnEle.innerHTML = "手机号码输入错误";
  } /*失去焦点进行内容判断*/
  if (phonepattern.test(phoneEle.value)) {
    phoneWarnEle.innerHTML = "";
    phonewarn = true;
  }
};

/*地址界面*/
var addresswarn = false;
var provinceEle = document.getElementById("province");
var cityEle = document.getElementById("city");
var addressWarnEle = document.getElementById("addresswarn");
var data = {
  广东: ["广州市", "佛山市", "湛江市", "清远市", "河源市"],
  福建: ["泉州市", "福州市", "厦门市", "漳州市", "龙岩市"],
  浙江: ["杭州市", "宁波市", "金华市", "绍兴市", "温州市"],
};
for (var i in data) {
  var tmp = document.createElement("option");
  tmp.innerText = i;
  provinceEle.appendChild(tmp);
}
provinceEle.onchange = function (ev) {
  addresswarn = true;
  cityEle.innerHTML = "";
  var cityArray = data[this.value];
  for (var j in cityArray) {
    var tmp = document.createElement("option");
    tmp.innerText = cityArray[j];
    cityEle.appendChild(tmp);
  }
};

/*密码界面*/
var password1warn = false;
var pawd;
var passwordEle = document.getElementById("password");
var passwordWarnEle = document.getElementById("passwordwarn");
passwordpattern = /^[a-zA-Z0-9]{6,12}$/; /*password的正则模板*/
passwordEle.onfocus = function (ev) {
  /*获取焦点*/
  passwordEle.setAttribute("type", "password"); /*开始输入时将密码屏蔽*/
  if (passwordEle.value == "请输入你的密码") {
    this.value = "";
  }
};
passwordEle.onblur = function (ev) {
  /*失去焦点*/
  if (passwordEle.value == "") {
    passwordEle.setAttribute("type", "text"); /*没输入时则不将密码屏蔽*/
    this.value = "请输入你的密码";
  }
  if (!passwordpattern.test(passwordEle.value)) {
    passwordWarnEle.innerHTML = "至少输入6至12个字符";
  } /*失去焦点进行内容判断*/
  if (passwordpattern.test(passwordEle.value)) {
    passwordWarnEle.innerHTML = "";
    password1warn = true;
  }
  pawd = passwordEle.value; /*记录密码，用于后面确认密码*/
};

/*确认密码界面*/
var password2warn = false;
var password2Ele = document.getElementById("password2");
var password2WarnEle = document.getElementById("password2warn");
password2Ele.onfocus = function (ev) {
  /*获取焦点*/
  password2Ele.setAttribute("type", "password"); /*开始输入时将密码屏蔽*/
  if (password2Ele.value == "请确认你的密码") {
    this.value = "";
  }
};
password2Ele.onblur = function (ev) {
  /*失去焦点*/
  if (password2Ele.value == "") {
    password2Ele.setAttribute("type", "text"); /*没输入时则不将密码屏蔽*/
    this.value = "请确认你的密码";
  }
  if (pawd != password2Ele.value) {
    password2WarnEle.innerHTML = "两次输入的密码不匹配";
  } /*失去焦点进行内容判断*/
  if (pawd == password2Ele.value) {
    password2WarnEle.innerHTML = "";
    password2warn = true;
  }
};

/*清除重置按钮*/
var resetEle = document.getElementById("reset"); //获取清除重置按钮的节点
resetEle.onclick = function (ev) {
  passwordEle.setAttribute("type", "text"); //清除重置后取消密码输入框的屏蔽
  password2Ele.setAttribute("type", "text");
};

/*注册按钮*/
var submitEle = document.getElementById("submit"); //获取注册按钮的节点
submitEle.onclick = function (ev) {
  /*对地址进行判断*/
  if (!addresswarn) {
    addressWarnEle.innerHTML = "请选择地址";
  }
  if (addresswarn) {
    addressWarnEle.innerHTML = "";
  }
  /*对性别进行判断*/
  if (!genderwarn) {
    genderWarnEle.innerHTML = "请选择性别";
  }
  if (genderwarn) {
    genderWarnEle.innerHTML = "";
  }
  /*对所有的输入进行判断*/
  if (
    namewarn &&
    genderwarn &&
    emailwarn &&
    phonewarn &&
    addresswarn &&
    password1warn &&
    password2warn
  ) {
    submitEle.setAttribute("type", "submit");
  }
};
